<script lang="ts" setup>
import { useUseStore } from "@/stores/user.ts"
import type { UserStructure } from "@/api/user.ts"

const store = useUseStore()
const { list, total } = toRefs(store.state)
const { proxy } = getCurrentInstance()!
const page = ref(1)
const pageSize = ref(10)
watchEffect(() => {
  store.getUserList({
    page: page.value,
    pageSize: pageSize.value
  })
})

const handleSizeChange = (val: number) => {
  pageSize.value = val
}
const handleCurrentChange = (val: number) => {
  page.value = val
}

const editType = ref(-1)
const editData = ref<UserStructure | undefined>(undefined)
const setting = ref(false)
const panelTitle = computed(() =>
  editType.value === 0 ? "添加用户" : "编辑用户"
)

const handleAddUser = () => {
  editType.value = 0
  editData.value = {} as UserStructure
  setting.value = true
}

const handleEditUser = (user: UserStructure) => {
  editType.value = 1
  editData.value = { ...user }
  setting.value = true
}

const addUser = async (user: UserStructure) => {
  await store.addUser({
    ...user,
    page: page.value,
    pageSize: pageSize.value
  })
  proxy?.$message.success("添加成功")
  setting.value = false
}

const editUser = async (user: UserStructure) => {
  await store.editUser({
    ...user,
    page: page.value,
    pageSize: pageSize.value
  })
  proxy?.$message.success("编辑成功")
  setting.value = false
}

const handleSubmit = async (editData: UserStructure) => {
  if (editType.value === 0) {
    await addUser(editData)
  } else {
    await editUser(editData)
  }
}

const handleDeleteUser = async (user: UserStructure) => {
  try {
    await proxy?.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    await store.deleteUser({
      ...user,
      page: page.value,
      pageSize: pageSize.value
    })
    proxy?.$message.success("删除成功")
  } catch {
    proxy?.$message.info("取消")
  }
}

const fromQuery = reactive({
  username: ""
})

const handleSubmitQuery = () => {
  page.value = 1
  getUserList()
}

const getUserList = () => {
  store.getUserList({
    page: page.value,
    pageSize: pageSize.value,
    ...fromQuery
  })
}
</script>

<template>
  <div p-30px>
    <h2>用户管理</h2>
    <div mb-10px>
      <el-button @click="handleAddUser">用户添加</el-button>
    </div>
    <el-form :inline="true" :model="fromQuery">
      <el-form-item label="昵称">
        <el-input
          v-model="fromQuery.username"
          clearable
          placeholder="请输入昵称"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmitQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="用户ID" prop="id"></el-table-column>
      <el-table-column label="昵称" prop="username"></el-table-column>
      <el-table-column label="头像" prop="avatar">
        <template #default="scope">
          <img
            v-if="scope.row.avatar"
            :src="scope.row.avatar"
            height="50"
            width="50"
          />
        </template>
      </el-table-column>
      <el-table-column label="电话" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEditUser(scope.row)"
            >编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDeleteUser(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></pagination>

    <right-panel v-model="setting" :title="panelTitle">
      <editor-user
        :data="editData"
        :type="editType"
        @submit="handleSubmit"
      ></editor-user>
    </right-panel>
  </div>
</template>

<style lang="scss" scoped></style>
